<template>
  <div class="container">
    <el-card shadow="never">
      <el-form :inline="true" :model="formData" ref="formData" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-input v-model="formData.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <!--  @keyup.enter 获取当前要输入的文本 -->
          <el-select placeholder="请选择" v-model="formData.state"  @keyup.enter="onSebmit">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">清除</el-button>
          <el-button type="primary" @click="onSebmit">搜索</el-button>
        </el-form-item>
        <el-button class="ai" type="success">新增目录</el-button>
      </el-form>
      <!-- Steps 步骤条 -->
  <el-steps simple><i class="el-icon-info boek"></i>数据一共{{counts}}条</el-steps>
        <el-table :data="tableData"  style="width: 100%">
          <el-table-column prop="id" align="center" label="序号" width="180"></el-table-column>
          <el-table-column prop="subjectName" align="center" label="所属学科" width="180"></el-table-column>
          <el-table-column prop="directoryName" align="center" label="目录名称" width="180"></el-table-column>
          <el-table-column prop="username" align="center" label="创建者"> </el-table-column>
          <el-table-column align="center" label="创建日期" >
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d}")}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="subjectID" align="center" label="面试题数量"> </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
             {{scope.row.state == '1' ? '已启用' : '已禁用'}}
            </template>
          </el-table-column>
          <el-table-column prop="caozuo" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="switchSate(scope.row)">{{scope.row.state == '1' ? '禁用' : '启用'}}</el-button>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
         @current-change="handleCurrentChange"
         class="zou-fen"
          background
          layout="prev, pager, next"
          :total="counts">
        </el-pagination>
    </el-card>
  </div>
</template>

<script>
//  list, simple, add, update, remove, changeState
// 目录简单列表  目录详情 目录添加  目录修改  目录删除  目录状态
import { list } from '../../api/hmmm/directorys'
// 导入通用状态
import { status } from '@/api/hmmm/constants'

// import formatTime from '../../filters/index.js'
export default {
  name: 'directorys',
  data () {
    return {
      // 输入框
      formData: {
        page: 1,
        pagesize: 10
      },
      // 列表目录
      tableData: [],
      counts: 0
    }
  },
  computed: {
    status () {
      return status
    }
  },
  created () {
    this.getContents()
  },
  methods: {
    // 禁用启用
    switchSate (rwo) {},
    // 分页
    handleCurrentChange (ubs) {
      this.formData.page = ubs
      this.getContents()
    },
    // 清除搜索框
    onSubmit () {
      this.formData.page = 1
      this.$refs.formData.resetFields()
      this.formData.directoryName = ''
      this.getContents(this.requestParameters)
    },
    // 搜索按钮开始
    onSebmit () {
      this.formData.page = 1
      this.getContents(this.requestParameters)
    },
    async getContents () {
      // { params: this.formData }
      const res = await list(this.formData)
      this.tableData = res.data.items
      this.counts = res.data.counts
      console.log(res)
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  margin-left: 20px;
  margin-top: 20px;
  .ai {
    float: right;
  }
}
.el-steps {
  background-color: #f4f4f5;
  padding: 13px 2%;
  .is-finish {
    color: #909399;
  }
}
.el-table{
  margin-top: 20px;
}
.zou-fen{
  float: right;
  padding: 20px 0;
}
</style>
